﻿@model Lead2012.ViewModels.LeadImportViewModel

<fieldset id="ImportLeadThirdStep" data-bind="visible: DisplayThirdView">
    <div class="content">
        <h2 class="app">
            <strong>Nhập khách hàng</strong> 
         </h2>
        <nav id="steps" class="steps steps-wide steps-blue">
                  <ul>
                    <li class="first done" style="z-index: 3;"><a  href="javascript:void(0)"><span>Bước 1: Chọn tài liệu</span></a></li>
                    <li class="done" style="z-index: 2;"><a  href="javascript:void(0)"><span>Bước 2: Map các tên cột</span></a></li>
                    <li class="last active" style="z-index: 1;"><a  href="javascript:void(0)"><span>Bước 3: Xem và nhập khách hàng</span></a></li>
                  </ul>
                </nav>
        <div class="title nomargin">
            <h3>
                Bước 3: Xem và nhập khách hàng
            </h3>
        </div>
        <div class="panel" id="panelReview">
            <p>
                <strong><span data-bind="text: titleReviewandImport"></span></strong>
            </p>
            <p>
                <span data-bind="visible: ShowSuggestionmsg">
                    Bạn có thể sửa chữa các lỗi, rõ ràng
                    nội dung trong các trường lỗi, hoặc chọn không nhập các bản ghi có lỗi.
                </span>
            </p>

            <!--ko if:HasError()==true-->
            <div class="error-msg">
                <span data-bind="text:txtCountError"></span> Khách hàng có thể được nhập với các trường lỗi.
            </div>
            <!--/ko-->

            <!--ko if:NoErrorsContainBlanks()==true-->
            <div class="info-msg">
                <span data-bind="text:txtCountError"></span> Khách hàng có thể được nhập với các trường rỗng.
            </div>
            <!--/ko-->

            <!--ko if:NoErrorsNoBlanks()==true-->
            <div class="info-msg">Tập tin của bạn không có lỗi và đã sẵn sàng để nhập.</div>
            <!--/ko-->
            
            <div id="wrapp-grids">
            <div id="grid-one-step3" class="table table-reviewmatch table-fixed table-reviewmatch-fixed">
                <div class="title" style="min-width:350px;float:left;">
                    <div class="col1">
                        <span class="w" style="min-height: 21px;">&nbsp;</span>
                    </div>
                    <div data-bind="foreach: ColumnHeaders">
                        <!--ko if: $index() <= 1-->
                        <div class="col1" style="width: 140px;">
                            <span class="w ellipsis" style="min-height: 21px;" data-bind="text: ColumnName, attr:{title: ColumnName}">
                            </span>
                        </div>
                        <!--/ko-->
                    </div> 
                </div>
                <div data-bind="foreach: ErrorRows">
                    <div style="min-width:350px;float:left;" data-bind="attr:{'class':(RowNumber==$parent.LastRowDisplay())? 'line last':'line'},visible: IgnoreWhenImport == true ? false: true">
                        <div class="col1 col-n">
                            <!--ko if:$parent.ShowDeleteBtn()==true-->
                            <span class="w" style="min-height: 21px;"><a class="btn btn-x-light info"  href="javascript:void(0)"
                                style="cursor: pointer;" data-bind="click: $parent.x_OutRow.bind($data)">X</a> <span
                                    data-bind="text: RowNumber"></span></span>
                            <!--/ko-->
                            <!--ko if:$parent.ShowDeleteBtn()==false-->
                            <span class="w" style="min-height: 21px; text-align: center;"><span data-bind="text: RowNumber">
                            </span></span>
                            <!--/ko-->
                        </div>
                        <div data-bind="foreach: Cells">

                            <!--ko if: $index() <= 1-->
                            <div data-bind="attr:{'class': ClassName},event: { dblclick: $parentContext.$parent.EditDone.bind($data) }" style="width: 140px;">
                                
                                <!--ko if:IsError==false-->
                                  
                                  <!--ko if:Value!=''-->
                                   <span class="w ellipsis" style="min-height: 21px;" data-bind="text: Value, attr:{id: CellID,title: Value}">
                                    </span>
                                  <!--/ko-->
                                 
                                  <!--ko if:Value==''-->
                                      <input type="text" maxlength="500"  onkeypress="return Keypress_Event(event,value, id )" class="text textintable" data-bind="attr:{id: CellID}" />
                                      <span class="anchor" style="display:none;">
                                            <a class="btn btn-downarrow" href="javascript:void(1);" data-bind="griddropdown:{},attr:{id:CellID+'+'+Type}"></a>
                                       </span>
                                    <!--/ko-->
                               <!--/ko-->
                               <!--ko if:IsError==true-->
                                        
                                        <span class="w textintable ellipsis" style="min-height: 21px;" data-bind="attr:{id:CellID},text: Value">
                                        </span>

                                        <span class="anchor">
                                            <a class="btn btn-downarrow"  href="javascript:void(1);" data-bind="griddropdown:{},attr:{id:CellID+'+'+Type}"></a>
                                        </span>
                                <!--/ko-->     

                                
                                
                            </div>
                            <!--/ko-->
                        </div>
                    </div>
                </div>
            </div>
            <div id="gridview" class="table table-reviewmatch table-reviewmatch-scroll table-horscroll-emi">
                <div id="scrollbar" data-bind="visible:ShowScrollTT" class="scroll-tip">
                    Cuộn để xem thêm lỗi.<span class="arr"></span>
                </div>
                <div class="title">
                    <div data-bind="foreach: ColumnHeaders">
                        <!--ko if: $index() > 1-->
                        <div class="col1">
                           
                            <span class="w ellipsis" style="min-height: 21px;" data-bind="text: ColumnName, attr:{title: ColumnName}">
                            </span>
                        </div>
                        <!--/ko-->
                    </div>
                </div>
                <div data-bind="foreach: ErrorRows">
                    <div data-bind="attr:{'class':(RowNumber==$parent.LastRowDisplay())? 'line last':'line'},visible: IgnoreWhenImport == true ? false: true,foreach: Cells">
                       
                            <!--ko if: $index() > 1-->
                            <div data-bind="attr:{'class': ClassName},event:{ dblclick: $parentContext.$parent.EditDone.bind($data) }">
                                
                                <!--ko if:IsError==false-->
                                    
                                    <!--ko if:Value!=''-->
                                      <span class="w ellipsis" style="min-height: 21px;" data-bind="text: Value, attr:{id: CellID,title: Value}">
                                      </span>
                                    <!--/ko-->

                                    <!--ko if:Value==''-->
                                      <input type="text" maxlength="500"  onkeypress="return Keypress_Event(event,value, id )" class="text textintable" data-bind="attr:{id: CellID}" />
                                      <span class="anchor" style="display:none;">
                                            <a class="btn btn-downarrow" href="javascript:void(1);" data-bind="griddropdown:{},attr:{id:CellID+'+'+Type}"></a>
                                       </span>
                                    <!--/ko-->

                                <!--/ko-->


                               <!--ko if:IsError==true-->
                                        
                                        <span class="w textintable ellipsis" style="min-height: 21px;" data-bind="attr:{id:CellID},text: Value">
                                        </span>

                                        <span class="anchor">
                                            <a class="btn btn-downarrow"  href="javascript:void(1);" data-bind="griddropdown:{},attr:{id:CellID+'+'+Type}"></a>
                                        </span>
                                <!--/ko-->

                               
                            </div>
                            <!--/ko-->
                      
                    </div>
                </div>
            </div>
            </div>
            <div class="clear">
            </div>
            <p data-bind="visible: HasErrorsToDisplay">
                <input type="checkbox" id="DoNotImportLeadswithErrors" data-bind="checked: DoNotImportLeadswithErrors" />
                Không nhập các bản ghi có lỗi
            </p>
            
        </div>
        <h3 class="centered-wbtn centered-wbtn-bottom save">
            <a class="btn btn-back-light left" data-bind="click:GoBackToStepTwo">Back</a> <a
                class="btn btn-importleads-gray right" href="javascript:void(1);" data-bind="click: SendDataToServer, enable: enableNextButton, attr:{'class': attrNextButton}">
                Next</a>
        </h3>
    </div>
    @Html.Partial("FancyboxDone")
</fieldset>
